<template>
  <a-table
      row-key="id"
      :columns="columns"
      :data-source="searchResultData.songs"
      :pagination="false"
      :customRow="rowClick"
      :loading="loadingFlag"
  >
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>

<script>
import {getMusicTime} from "@/utils/util";
import {playlistTrackAll} from "@/api/api";
import {mapActions} from "vuex";
import {play, replaceMusicList} from "@/components/web/util/music";
import Vue from "vue";
import {CURRENT_PLAYING_MUSIC} from "@/store/mutation-types";

export default {
  name: "PlayListMusic",
  data() {
    return {
      playListId: 0,
      loadingFlag: true,
      searchResultData: {},
      columns: [
        {
          title: '',
          dataIndex: 'sort',
          key: 'sort',
          scopedSlots: {customRender: 'sort'},
          width: 60,
          customRender: function (text, record, index) {
            return index + 1
          }
        },
        {
          title: '音乐标题',
          dataIndex: 'musicName',
          key: 'musicName',
          scopedSlots: {customRender: 'musicName'},
          customRender: function (text, record) {
            return record.name;
          }
        },
        {
          title: '歌手',
          dataIndex: 'singer',
          key: 'singer',
          customRender: function (text, record) {
            return record.ar[0].name;
          }
        },
        {
          title: '专辑',
          dataIndex: 'album',
          key: 'album',
          ellipsis: true,
          customRender: function (text, record) {
            return record.al.name;
          }
        },
        {
          title: '时长',
          dataIndex: 'dt',
          key: 'dt',
          ellipsis: true,
          width: 100,
          customRender: function (text) {
            return getMusicTime(text / 1000);
          }
        },
      ],
    }
  },
  mounted() {
    this.getPlayListMusicList(this.playListId);
  },
  methods: {
    ...mapActions(["addMusicToList","resetPlayList","updateCurrentMusic"]),
    getPlayListMusicList(playListId) {
      if (!playListId || playListId == 0) {
        return;
      }
      let _this = this;
      _this.loadingFlag = true
      _this.playListId = playListId;
      let params = {
        'id': _this.playListId,
        'cookie': _this.$store.getters.cookie,
      }
      playlistTrackAll(params).then(res => {
        _this.searchResultData = res;
        _this.loadingFlag = false
      }).finally(()=>{
        _this.loadingFlag = false
      })
    },
    // 将当前歌单的音乐替换到正在播放列表
    replaceMusicList(){
      replaceMusicList(this.searchResultData.songs);
    },
    rowClick(record){
      let _this = this;
      return {
        on:{
          dblclick:()=>{
            let musicInfo = {
              'id':record.id,
              'coverImgUrl':record.al.picUrl,
              'name':record.name,
              'author':record.ar[0].name,
              'duration':record.dt
            }
            // 添加到播放列表
            _this.addMusicToList(musicInfo);
            // 将数据设置到background.js 中
            _this.$bg.musicPlayer.musicList = _this.$store.getters.playList
            _this.$bg.musicPlayer.currentMusic = _this.$store.getters.currentPlayingMusic
            // 播放双击后的音乐
            play(_this.$bg.musicPlayer,1)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
::v-deep .ant-table-row td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
